import React, { type ReactNode } from 'react';
import { Form, Input, Button, message } from 'antd';
import { ArrowRightOutlined, BookOutlined, LeftOutlined, UserOutlined } from '@ant-design/icons';
import './Login.css';
import { useNavigate } from 'react-router-dom';

interface RegisterTypeProps {
    onBack?: () => void;
    onRegisterClick?: (registerType: string) => void;
    registerTypeList?: Array<{
        desc: string;
        icon: ReactNode;
        key: string;
        name: string;
    }>; 
}

const RegisterType: React.FC<RegisterTypeProps> = ({ onBack, onRegisterClick, registerTypeList = [] }) => {
    // const navigate = useNavigate();

    const goBackToLogin = () => {
        if (onBack) {
            onBack();
        } else {
            // navigate('/');
        }
    };

    return (
        <>
            <div className="login-container">
                {/* 右侧注册区域 */}
                <div className="login-right">
                    <div className="login-header">
                        <h1 className="login-title">账号注册</h1>
                        <p className="login-welcome">欢迎加入！我们将全力为您提供贴心服务</p>
                    </div>
                    <div className="login-content">
                        {registerTypeList.map((item) => (
                            <div className='register-type-item' onClick={() => onRegisterClick?.(item.key)} key={item.key}>
                                <div className='register-type-item-icon'>{item.icon}</div>
                                <div className='register-type-item-right'>
                                    <div className='register-type-item-right-title'>{item.name}</div>
                                    <div className='register-type-item-right-desc'>{item.desc}</div>
                                </div>
                                <div className='register-type-item-right-arrow'><ArrowRightOutlined /></div>
                            </div>
                        ))}
                            {/* <div className='register-type-item-icon'><BookOutlined /></div>
                            <div className='register-type-item-right'>
                                <div className='register-type-item-right-title'>注册新课题组</div>
                                <div className='register-type-item-right-desc'>创建课题组，统一管理实验数据、分配仪器权限、协作发表成果</div>
                            </div>
                            <div className='register-type-item-right-arrow'><ArrowRightOutlined /></div>
                        </div> */}
                    </div>
                    {/* 登录链接 */}
                    <div className="register-link-container">
                        <div style={{cursor: 'pointer'}} onClick={goBackToLogin}>
                            <LeftOutlined />返回
                        </div>
                        <div>
                        已有账户？
                        <span onClick={goBackToLogin} className="register-text">
                            立即登录
                        </span>
                        </div>
                    </div>
                </div>
            </div>
        </>
    );
};

export default RegisterType;